<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import * as echarts from 'echarts'
import { lineData } from '@/socket'

const props = defineProps({
  color: {
    type: String,
    default: '#4fccdd'
  }
})
const main = ref(null)
const { proxy } = getCurrentInstance()
const initChart = (myChart) => {
  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: 'category',
      name: '月',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      minorSplitLine: {
        show: true
      },
      axisLine: {
        lineStyle: {
          color: 'skyblue'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#3498db',
          opacity: 0.3
        }
      }
    },
    yAxis: {
      type: 'value',
      minorSplitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'skyblue'
        }
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        data: lineData,
        type: 'line',
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: props.color
        },
        areaStyle: { // 区域面积
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: props.color // 0% 处的颜色
          },
          {
            offset: 0.7,
            color: '#083845' // 70% 处的颜色
          },
          {
            offset: 1,
            color: '#06253b', // 100% 处的颜色
          }])
        }
      }
    ]
  })
}
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(proxy.$refs.main)
  setInterval(() => initChart(myChart), 1000)
})
</script>

<template>
  <div id="main" ref="main"></div>
</template>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>
